<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
          type='text/javascript'></script>

  <title>Scroll Latency Test</title>
  <style>
    div.block  {
      width: 60px;
      margin: auto;
      height: 1024px;
      cursor: pointer;
    }
    div#block_a {
      background-color: white;
    }
    div#block_b {
      background-color: black;
    }
    body {
      margin: 0;
    }
  </style>
  <script>
    function on_click(event) {
      // Swap colors with each click
      block_a_color = $("#block_a").css("background-color");
      block_b_color = $("#block_b").css("background-color");
      $("#block_a").css("background-color", block_b_color)
      $("#block_b").css("background-color", block_a_color)

      // Scroll to location of click
      $("body").animate({
          scrollTop: $("#block_a").height() - event.clientY
      }, 0);
    }
    $(document).ready(function() {
      $("body").click(on_click)
    })
  </script>
</head>

<body>
  <div id="block_a" class="block">&nbsp;</div>
  <div id="block_b" class="block">&nbsp;</div>
</body>

</html>
